<template>
  <div>
    <Nav></Nav>
    <div class="list-content">
      <section>
        <a href="javascript:;">
          <div class="article-title">
            <p>新车 | 售价13.78万元，一汽-大众捷达VS7黑锋荣耀版Pro到店实拍</p>
            <ul>
              <li>
                <div><img src="../../img/list3.jpg" alt="" /></div>
              </li>
              <li>
                <div><img src="../../img/list1.jpg" alt="" /></div>
              </li>
              <li>
                <div><img src="../../img/list2.jpg" alt="" /></div>
              </li>
            </ul>
            <div>
              <span>懂车帝报道</span><span>12-21 00:02</span
              ><span><i>#</i>捷达VS7</span>
            </div>
          </div>
        </a>
      </section>
      <section>
        <a href="javascript:;">
          <div class="article-title">
            <p>新车 | 售价13.78万元，一汽-大众捷达VS7黑锋荣耀版Pro到店实拍</p>
            <ul>
              <li>
                <div><img src="../../img/list3.jpg" alt="" /></div>
              </li>
              <li>
                <div><img src="../../img/list1.jpg" alt="" /></div>
              </li>
              <li>
                <div><img src="../../img/list2.jpg" alt="" /></div>
              </li>
            </ul>
            <div>
              <span>懂车帝报道</span><span>12-21 00:02</span
              ><span><i>#</i>捷达VS7</span>
            </div>
          </div>
        </a>
      </section>
      <section>
        <a href="javascript:;">
          <div class="article-title">
            <p>新车 | 售价13.78万元，一汽-大众捷达VS7黑锋荣耀版Pro到店实拍</p>
            <ul>
              <li>
                <div><img src="../../img/list3.jpg" alt="" /></div>
              </li>
              <li>
                <div><img src="../../img/list1.jpg" alt="" /></div>
              </li>
              <li>
                <div><img src="../../img/list2.jpg" alt="" /></div>
              </li>
            </ul>
            <div>
              <span>懂车帝报道</span><span>12-21 00:02</span
              ><span><i>#</i>捷达VS7</span>
            </div>
          </div>
        </a>
      </section>
      <section>
        <a href="javascript:;">
          <div class="article-title">
            <p>新车 | 售价13.78万元，一汽-大众捷达VS7黑锋荣耀版Pro到店实拍</p>
            <ul>
              <li>
                <div><img src="../../img/list3.jpg" alt="" /></div>
              </li>
              <li>
                <div><img src="../../img/list1.jpg" alt="" /></div>
              </li>
              <li>
                <div><img src="../../img/list2.jpg" alt="" /></div>
              </li>
            </ul>
            <div>
              <span>懂车帝报道</span><span>12-21 00:02</span
              ><span><i>#</i>捷达VS7</span>
            </div>
          </div>
        </a>
      </section>
    </div>
  </div>
</template>

<script>
import Nav from '@/components/Nav'
export default {
  components: {
    Nav
  }
}
</script>

<style lang="scss" scope>
.list-content {
  margin-top: 1.92rem;
  a {
    position: relative;
    overflow: hidden;
    display: flex;
    padding: 0.26rem 0.3rem;
    .article-title {
      overflow: hidden;
      display: flex;
      box-sizing: border-box;
      flex-direction: column;
      justify-content: center;
      flex: 1;
      p {
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        line-height: 1.3em;
        font-size: 0.38rem;
      }
      ul {
        position: relative;
        margin: 0.16rem 0 0;
        display: flex;
        li {
          flex: 1;
          margin-right: 0.04rem;
          overflow: hidden;
          div {
            position: relative;
            width: 100%;
            padding-bottom: 67.5%;
            img {
              position: absolute;
              width: 100%;
              background-color: #e8e8e8;
              min-height: 100%;
            }
          }
        }
      }
      div {
        overflow: hidden;
        margin-top: 0.16rem;
        text-overflow: ellipsis;
        color: #999;
        white-space: nowrap;
        span {
          margin-right: 0.1rem;
          line-height: 0.32rem;
          i {
            color: #ffcb00;
            font-weight: 700;
            margin-right: 0.06rem;
            font-style: italic;
          }
        }
      }
    }
  }
}
</style>
